<script setup>
import { ref, computed,toRaw } from "vue";

import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";

import useGoodsStore from "@/stores/counter.js";
import userUserCartStore from "@/stores/cart/Cart.js";
import ShopInfo from "@/components/ShopInfo.vue";
import Product from "@/components/Product.vue";
import useCheckedCartStore from "@/stores/cart/CheckedCart.js";

import CartBottom from "./CartBottom.vue";
// ctrl shirft + c  弹出当前文件夹的命令窗口

// 这里也可以用router获取params
const props = defineProps(["id"]);  

// 生成选中购物车类的实例
const Checked = useCheckedCartStore();  
const { checkedCart } = storeToRefs(Checked);
// import {useRoute} from "vue-router";
// const route = useRoute();

const { GoodsArr } = storeToRefs(useGoodsStore());

// GoodsArr.value.filter(item =>item.id==props.id ) 筛选结果还是一个响应式对象，赋值给其他变量时等于直接定义

// 当前页面的的商品数据
const store = GoodsArr.value.find((item) => item.id == props.id);
// let newArr = GoodsArr.value.find(item => item.id==props.id)
// 所有商品信息
const GoodsItem = store.category;
// 生成购物车每个商品的信息，条件
// let cartGoodsItem = item.find(item => return item)

// 响应式对象更新数据 左侧侧边栏的边栏数据组下标
let i = ref("all");
const arr = computed(() => {
  let arr = [];

  if (i.value === "all") {
    GoodsItem.forEach((item) => {
      // item是每个分类的信息
      // 展开item.list集合存入arr
      arr = [...arr, ...item.list];
    });
  } else {
    let list = GoodsItem[i.value].list;
    arr = [...arr, ...list];
  }
  //    arr = [...GoodsItem.value[index].list]
  return arr;
});




// 购物车商品信息 
const userCart = userUserCartStore();
// console.log(userCart.cart);

let CartObj = computed(() => {


  // const {}
  // 用于存储所有商品数据的集合
  let GoodsAll = [];
  GoodsItem.forEach(item => {
    GoodsAll = [...GoodsAll, ...item.list];
  })
  // 所有购物车数据 存入pinia中 number>0
  GoodsAll = GoodsAll.filter(item => item.number > 0);
 let  checkedGoodsAll = GoodsAll.filter(item => {return item.number > 0 && item.checked});
  console.log(checkedGoodsAll);
  // GoodsAll =JSON.parse(JSON.stringify(GoodsAll));
  // console.log(GoodsAll);
// 创建CartList模板   这里可能存在一个问题***
  const cartObj =ref({ name: store.name, list: GoodsAll, acount:0,alNumber:0});
// 判断该购物车是否存在
  let isName = userCart.cart.find(item=> item.name===store.name);
  let CartItem={};
  
  if (isName===undefined) {
    // 此处为".value赋值"并非解除响应
    userCart.cart.push(cartObj.value);
    CartItem=userCart.cart[0];

  }else{
    userCart.cart.forEach((item, index) => {
    if (item.name === store.name) {
      // 赋值list number>0
      item.list = GoodsAll;  //数据持久化
      CartItem=item

    }
  })
  }
  // let curChecked = checkedCart.find(item =>item.name===store.name);
  // checkedCart.value[0].list = []
  // checkedCart.value[0].list=JSON.parse(JSON.stringify(checkedCart.value[0].list)); 

  console.log("UserCart:",userCart.cart);
  console.log("CartItem:",CartItem);
  // console.log("checkedCart:",checkedCart.value);

  return CartItem;

});






// checkedCart=userCart.cart;
// console.log("userCart.cart:",CartObj.value);
// console.log("checkedCart:",checkedCart);
// userCart.cart.forEach(item =>{
//     console.log(item);
// })
// let curCart = userCart.cart.find(item=> {console.log(item);});
// let curCartChecked = checkedCart.find(item =>item.name===store.name);



// console.log("curCart:",curCart);
// console.log("curCartChecked:",curCartChecked);
let CheckedObj = computed(() => {
let curCartChecked = {list:[]};

  //userCart.cart中list已被定义，但userCart.cart.list却是undefined
  // console.log(userCart.cart.list);
    // let list =userCart.cart[0].list.filter(item =>item.checked);
    // console.log(22);
    // console.log(userCart.cart.list!==undefined);
    // console.log(userCart.cart.list);
  // if (userCart.cart[0].list!==undefined) {
    // console.log(22);
  //   let list =userCart.cart.list.filter(item =>item.checked);
  //   console.log("list:",list);

  // checkedCart.value= JSON.parse(JSON.stringify(userCart.cart))
    
  // // 对应的找到选中购物车的当前购物车

  // // curCartChecked.list = checkedCart.value.find(item =>item.name===store.name);
  // console.log("curCartChecked:",curCartChecked);
  
  
  // }


   // CartObj 由于购物车页面只更改了list里面的数据所以，要点到list，才能list改变时该计算属性才触发
  // let curCartChecked = {};


  // console.log(userCart.cart);
  // userCart.cart[0].list!==undefined
  if (CartObj.value.list.length!==0) {
    
    // list存在 则选中购物一定存在 选中购物车是从购物车copy过来的
    checkedCart.value=JSON.parse(JSON.stringify(userCart.cart)); 
    // checkedCart.value=userCart.cart 

    // console.log(userCart.cart);
    // console.log(checkedCart);

    // 找到当前购物车
    let curCart = userCart.cart.find(item=> item.name===store.name);
    console.log(curCart);
    // let curCartChecked = Checked.value.find(item =>item.name===store.name);
    // 对应的找到选中购物车的当前购物车
     curCartChecked = checkedCart.value.find(item =>item.name===store.name);
     console.log(curCartChecked);
  // 对curCart.list进行操作保持页面的响应能影响到 CheckedObj 计算属性  如果list被覆盖掉则计算属性不会再有相应的页面触发后的响应
  // 一直筛选着不覆盖 筛选选中的商品  只有list的双向绑定
    curCartChecked.list = curCart.list.filter(item =>item.checked);
  // 链接赋值 
    // curCartChecked.list=list; 

  //   console.log(userCart.cart);
  //   console.log(curCartChecked);

  // // curCartChecked.list=JSON.parse(JSON.stringify(list));


  // // curCartChecked.list=list
  // console.log("checked:",checkedCart);  
  }

  

console.log(checkedCart);
console.log(userCart.cart);



// return userCart.cart;  因为是一个数组，直接返回当前购物车
// 把store.cartList的具体购物车设置为计算属性
// return CheckedItem;


// console.log(curCartChecked);
return curCartChecked

});

// console.log(CheckedObj.value);         
// ******不注释不报错
const router = useRouter();

const back = () => {
  router.push({
    path: "/home"
  })
}
// console.log("GoodsArr", GoodsArr);
// console.log(GoodsArr.value.filter((item) => item.id == props.id));
// console.log("store", store);
// console.log("GoodsItem", GoodsItem);
// console.log("item[0]", item[0]);
// console.log(GoodsArr.value);
</script>

<template>
  <div class="shop">
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont search_back" @click="back()">&#xe697;</span>
      <div class="search_content">
        <span class="iconfont search_content_icon">&#xe632;</span>
        <input type="text" class="search_content_input" placeholder="请输入商品名称" />
      </div>
    </div>
    <!-- 商店信息 -->
    <div class="shop_info">
      <!-- 商店组件商店组件商店组件 -->
      <ShopInfo :item="store" />
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="category">
        <div class="category_item" :class="{ 'category_item--active': i === 'all' }" @click="i = 'all'">
          全部商品
        </div>
        <div class="category_item" :class="{ 'category_item--active': i === index }" v-for="(item, index) in GoodsItem"
          :key="item.id" @click="i = index">
          {{ item.name }}
        </div>
        <!-- <div class="category_item">水果</div> -->
      </div>

      <div class="product">
        <!-- 商品组件商品组件商品组件 -->
        <div v-for="(item, index) in arr" :key="item.id">
          <Product :item="item" @add="addReduce(index, 1)" @subation="addReduce(index, -1)" />
        </div>
      </div>
    </div>
    <!-- 购物车底部  :curChecked="CheckedObj"  -->
    <!-- {{  CheckedObj  }}      -->
    <CartBottom :curCartObj="CartObj" :curChecked="CheckedObj" :id="id"/> 
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";

.shop {

  //搜索
  .search {
    margin: 0.18rem;
    display: flex;
    align-items: center;

    &_back {
      font-size: 0.24rem;
      margin-right: 0.08rem;
      color: #b6b6b6;
    }

    &_content {
      flex: 1;
      height: 0.32rem;
      background-color: #f5f5f5;
      border-radius: 0.16rem;
      display: flex;
      align-items: center;

      &_icon {
        color: #b6b6b6;
        margin: 0 0.12rem;
      }

      &_input {
        border: none;
        outline: none;
        background: none;
        width: 100%;
        height: 0.32rem;
      }
    }
  }

  //商店信息
  .shop_info {
    margin: 0 0.18rem;
  }

  // 内容
  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.7rem;
    bottom: 0.5rem;
    display: flex;

    .category {
      overflow-y: scroll;
      width: 0.78rem;
      background-color: #f5f5f5;

      &_item {
        line-height: 0.4rem;
        font-size: 0.14rem;
        text-align: center;
        color: $content_fontcolor;

        &--active {
          background-color: $bgColor;
        }
      }
    }

    .product {
      flex: 1;
      overflow-y: scroll;
    }
  }
}
</style>